<template>
  <baidu-map class="map" ak="Ps7d8xotpfXbGNyjljFhqoPH52dCGHjv" 
             :center="center" :zoom="zoom"
             :scroll-wheel-zoom="true" 
             :map-click="false" 
             @ready="handler">
    <!-- 设备标记（红色） -->
    <bm-marker v-for="(item, i) in othersInfo" 
              :position="{lng: item.lon,  lat: item.lat}"     
              :key="i"
              :icon="{url: 'https://api.map.baidu.com/images/markers.png',  size: {width: 23, height: 25}, opts: {imageSize: {width: 23, height: 25}}}">
      <bm-label :content="item.name"     
               :labelStyle="{color: 'red', fontSize: '12px', backgroundColor: 'white', padding: '2px 5px', borderRadius: '3px'}" 
               :offset="{width: -((item.name.length-1)/2)*12,  height: 35}"/>
    </bm-marker>
    
    <!-- 用户标记（蓝色） -->
    <bm-marker v-if="userInfo && userInfo.lon  && userInfo.lat"  
              :position="{lng: userInfo.lon,  lat: userInfo.lat}"   
              :icon="{url: 'https://api.map.baidu.com/images/markers.png',  size: {width: 23, height: 25}, opts: {imageOffset: {width: 0, height: -25}}}"> 
      <bm-label :content="userInfo.name"     
               :labelStyle="{color: 'blue', fontSize: '12px', backgroundColor: 'white', padding: '2px 5px', borderRadius: '3px'}" 
               :offset="{width: -((userInfo.name.length-1)/2)*12,  height: 35}"/>
    </bm-marker>
  </baidu-map>
</template>
 
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'    
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmLabel from 'vue-baidu-map/components/overlays/Label'
 
export default {
  name: 'XMap',
  components: { BaiduMap, BmMarker, BmLabel },
  props: {
    userInfo: {
      type: Object,
      default: () => ({}) // 默认空对象 
    },
    othersInfo: { // 修正了拼写错误 ohtersInfo -> othersInfo 
      type: Array,
      default: () => [] // 默认空数组 
    }
  },
  data() {
    return {
      center: { lng: 118.796, lat: 36.855 }, // 默认中心点 
      zoom: 12 
    }
  },
  methods: {
    handler({BMap, map}) {
      console.log(" 地图加载完成")
      // 添加比例尺控件 
      map.addControl(new  BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}))
      // 添加地图类型控件 
      map.addControl(new  BMap.MapTypeControl())
    }
  }
}
</script>
 
<style scoped>
.map {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
}
</style>